<template>
    <Panel>
        <div class="filter-bar">
            <div class="filter-bar__filter-group filter-bar__filter-group--30">
                <div class="filter-bar__input-icon-container">
                    <input type="text" placeholder="Search" v-model="searchQuery" class="filter-bar__input">
                    <div class="filter-bar__icon-container" v-html="searchIcon"></div>
                </div>
            </div>
            <div class="filter-bar__filter-group filter-bar__filter-group--30">
                <InlineDatepicker :date="fromStartTime" input-class="filter-bar__input" placeholder="From: Select Date" @input="updateFromStartTime"></InlineDatepicker>
            </div>

            <div class="filter-bar__filter-group filter-bar__filter-group--30">
                <InlineDatepicker :date="toStartTime" input-class="filter-bar__input" placeholder="To: Select Date" @input="updateToStartTime"></InlineDatepicker>
            </div>
        </div>
        <div class="tasks">
            <div class="tasks__header">
                <div class="tasks__c tasks__c--10">Type</div>
                <div class="tasks__c tasks__c--20">Title</div>
                <div class="tasks__c tasks__c--20">Assignee</div>
                <div class="tasks__c tasks__c--10">Status</div>
                <div class="tasks__c tasks__c--10">Start</div>
                <div class="tasks__c tasks__c--10">Due</div>
                <div class="tasks__c tasks__c--10">Subtasks</div>
            </div>
            <div class="tasks__list">
                <Draggable :v-model="filteredTasks">
                    <TaskRow v-for="task in filteredTasks" v-if="!task.parent_task" :task="task" :all-tasks="tasks" :level="0"></TaskRow>
                </Draggable>
            </div>
        </div>

    </Panel>
</template>
<script>
    import _ from 'lodash'
    import axios from 'axios'
    import Datepicker from 'vue-datepicker'
    import Draggable from 'vuedraggable'
    import InlineDatepicker from 'vuejs-datepicker'
    import Panel from './Panel.vue'
    import TaskRow from './TaskRow.vue'

    export default {
        components: {
            Datepicker,
            Draggable,
            InlineDatepicker,
            Panel,
            TaskRow
        },

        props: [
            'tasks'
        ],

        data() {
            return {
                searchIcon: require('../../assets/img/search-icon.svg'),
                filteredTasks: null,
                searchQuery: null,
                fromStartTime: null,
                toStartTime:null
            }
        },

        methods: {
            updateFromStartTime: function(val) {
                this.fromStartTime = val;
                this.filterTasks();
            },

            updateToStartTime: function(val) {
                this.toStartTime = val;
                this.filterTasks();
            },

            filterTasks: function() {
                this.filteredTasks = this.tasks;

                if(this.searchQuery) {
                    var q = this.searchQuery.toLowerCase();
                    this.filteredTasks = _.filter(this.filteredTasks, function(o) {
                        var title = o.title.toLowerCase();
                        if (title.indexOf(q) !== -1) {
                            return o;
                        }
                    });
                }

                if(this.fromStartTime) {
                    var startTime = this.fromStartTime;
                    this.filteredTasks = _.filter(this.filteredTasks, function(o) {
                        if (Date.parse(o.start) > Date.parse(startTime)) {
                            return o;
                        }
                    });
                }

                if(this.toStartTime) {
                    var startTime = this.toStartTime;
                    console.log(startTime);
                    this.filteredTasks = _.filter(this.filteredTasks, function(o) {
                        if (Date.parse(o.due) < Date.parse(startTime)) {
                            return o;
                        }
                    });
                }
            }
        },

        created: function(){
            this.filteredTasks = this.tasks;
        },

        watch: {
            searchQuery: function(val) {
                this.filterTasks();
            }
        }



    }
</script>